<template>
  <a-modal
    title="新增参数"
    :width="480"
    :visible="visible"
    :confirmLoading="loading"
    @ok="_submit"
    @cancel="_cancel">
    <a-spin :spinning="loading">
      <a-form :form="form" layout="vertical">
        <a-form-item label="名称">
          <a-input v-decorator="['itemName', { rules: [{ required: true, message: '名称不能为空!' }] }]" />
        </a-form-item>
        <a-form-item label="参数类型">
          <a-select
            placeholder="请选择参数类型"
            v-decorator="['itemType', { rules: [{ required: true, message: '请选择参数类型,参数类型不能为空！' }] }]"
            @change="_moduleTypeChange"
          >
            <a-select-option :value="1"> 单行文本 </a-select-option>
            <a-select-option :value="2"> 多行文本 </a-select-option>
            <a-select-option :value="3"> 金额及大写 </a-select-option>
            <a-select-option :value="4"> 身份证号码 </a-select-option>
            <a-select-option :value="5"> 手机号码 </a-select-option>
            <a-select-option :value="6"> 日期 </a-select-option>
            <a-select-option :value="7"> 选择框 </a-select-option>
            <a-select-option :value="8"> 数字及大写 </a-select-option>
            <a-select-option :value="9"> 年月 </a-select-option>
            <a-select-option :value="10"> 文件 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择框选项" v-if="form.getFieldsValue().itemType === 7">
          <a-input
            placeholder="请填写选项，每个选项使用逗号分割；例：张三，李四"
            v-decorator="['itemOptions', { rules: [{ required: true, message: '选择框选项不能为空!' }] }]"
          />
        </a-form-item>
        <template v-if="form.getFieldsValue().itemType === 10">
          <a-form-item label="文件名称">
            <a-input v-decorator="['fileName', { initialValue: '' }]" />
          </a-form-item>
          <a-form-item label="文件描述">
            <a-textarea v-decorator="['fileDescribe', { initialValue: '' }]" />
          </a-form-item>
          <a-form-item label="是否合同附件">
            <a-switch
              checked-children="是"
              un-checked-children="否"
              default-checked
              v-decorator="['isAppendice', { initialValue: true, valuePropName: 'checked' }]"
            />
          </a-form-item>
        </template>
        <a-form-item label="是否必填">
          <a-switch
            checked-children="是"
            un-checked-children="否"
            v-decorator="['isCanEmpty', { initialValue: true, valuePropName: 'checked' }]"
          />
        </a-form-item>
        <a-form-item label="数据项顺序">
          <a-input v-decorator="['itemSeq', { rules: [{ required: true, message: '数据项顺序不能为空!' }] }]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = [
  'itemName',
  'itemType',
  'bindParamName',
  'itemOptions',
  'fileName',
  'fileDescribe',
  'isAppendice',
  'isCanEmpty',
  'itemSeq'
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    paramsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      paramsListFilter: []
    }
  },
  methods: {
    /**
     * 项目类型选择
     */
    _moduleTypeChange (data) {
      if (data === 1) {
        this.paramsListFilter = this.paramsList.filter((item) => {
          return item.paramType === 5
        })
      } else if (data === 2) {
        this.paramsListFilter = this.paramsList.filter((item) => {
          return item.paramType === 6
        })
      }
    },
    /**
     * 提交表单
     */
    _submit: function () {
      this.$emit('ok')
    },
    /**
     * 取消
     */
    _cancel: function () {
      this.$emit('cancel')
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      console.log(this.model)
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted () {}
}
</script>
